import {
    DndContext,
    DragOverlay,
    KeyboardSensor,
    PointerSensor,
    defaultDropAnimation,
    rectIntersection,
    useSensor,
    useSensors
} from '@dnd-kit/core';
import {
    SortableContext,
    arrayMove,
    rectSortingStrategy,
    useSortable,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { useState } from 'react';
import "./index.less";

// 不等宽栅格项组件
function GridItem({ id, width, children }) {
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
        isDragging,
    } = useSortable({ id });

    const style = {
        transform: CSS.Translate.toString(transform),
        transition,
        gridColumn: `span ${width}`,
        opacity: isDragging ? 0.5 : 1,
    };

    return (
        <div
            ref={setNodeRef}
            style={style}
            {...attributes}
            {...listeners}
            className="grid-item"
        >
            {children}
        </div>
    );
}

// 拖拽覆盖层项
function DragOverlayItem({ id, width }) {
    return (
        <div className="grid-item" style={{ gridColumn: `span ${width}` }}>
            拖拽项 {id}
        </div>
    );
}

// 主组件
export default function ResponsiveGrid() {
    const [items, setItems] = useState([
        { id: '1', width: 1, content: '项目 1' },
        { id: '2', width: 5, content: '项目 2' },
        { id: '3', width: 1, content: '项目 3' },
        { id: '4', width: 9, content: '项目 4' },
        { id: '5', width: 2, content: '项目 5' },
        { id: '6', width: 10, content: '项目 6' },
    ]);

    const [activeId, setActiveId] = useState(null);

    const sensors = useSensors(
        useSensor(PointerSensor),
        useSensor(KeyboardSensor)
    );

    const handleDragStart = (event) => {
        setActiveId(event.active.id);
    };

    const handleDragEnd = (event) => {
        const { active, over } = event;

        if (active.id !== over.id) {
            setItems((items) => {
                const oldIndex = items.findIndex((item) => item.id === active.id);
                const newIndex = items.findIndex((item) => item.id === over.id);
                return arrayMove(items, oldIndex, newIndex);
            });
        }

        setActiveId(null);
    };

    const activeItem = activeId ? items.find((item) => item.id === activeId) : null;

    return (
        <div className="grid-container">
            <DndContext
                sensors={sensors}
                collisionDetection={rectIntersection}
                onDragStart={handleDragStart}
                onDragEnd={handleDragEnd}
            >
                <SortableContext items={items} strategy={rectSortingStrategy}>
                    {items.map((item) => (
                        <GridItem key={item.id} id={item.id} width={item.width}>
                            {item.content}
                        </GridItem>
                    ))}
                </SortableContext>

                <DragOverlay dropAnimation={defaultDropAnimation}>
                    {activeItem ? (
                        <DragOverlayItem id={activeItem.id} width={activeItem.width} />
                    ) : null}
                </DragOverlay>
            </DndContext>
        </div>
    );
}